<script props>
  module.exports = {
    source: props.source,
    // Deleting the last extension from the file path.
    sourceWithoutExt: props.source.replace('.' + props.source.split('.').at(-1), ''),
    alt: props.alt || '',
    loading: props.loading || 'auto',
    class: props.class ?? '',
    webp: props.webp,
    avif: props.avif,
  }
  /* Usage example
  <x-img class='coverImg'
         source='images/image.jpg'
         webp
         avif
         alt=''>
  </x-img>
  */
</script>

<picture>
  <if condition='avif != undefined'>
    <source srcset='{{sourceWithoutExt}}.avif'
            type='image/avif'>
  </if>
  <if condition='webp != undefined'>
    <source srcset='{{sourceWithoutExt}}.webp'
            type='image/webp'>
  </if>

  <img class='{{class}}'
       src='{{source}}'
       loading='{{loading}}'
       alt='{{alt}}'>
</picture>